<template>
  <div>
    <div class="mvs" >
      <div class="mv" v-for="(item, index) in MVs">
        <div class="mv_cover">
          <img class="cover_img" src="../../assets/img/李知恩.jpg" alt="" />
        </div>
        <div class="song_name_box">
          {{ item.song_name }}
        </div>
        <div class="play_amount_box">
          播放量:  {{ item.play_amount }}
        </div>
      </div>
    </div>
    <div style="width: 100%;height:1px;"></div>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return {
      MVs: [
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },
        {
          img_url: '../../assets/img/李知恩.jpg',
          song_name: '浅墨临汐',
          play_amount: '200万',
        },

      ]
    }
  }

}
</script>

<style scoped>
.mvs{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 5% 25%;
}
.mv{
  display: flex;
  flex-direction: column;
  margin: 15px 20px;
}
.song_name_box{
  margin-top: 5px;
  margin-left: 50px;
}
.play_amount_box{
  color: gray;
  opacity: 0.8;
  margin-left: 50px;
}
.mv_cover{
  height: 200px;
  width: 200px;
  box-shadow: 0 0 10px #ddd;
}
.cover_img{
  height: 100%;
  width: 100%;
  background-color: #eee;
}
</style>